<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>查询电话号码</title>
</head>

<body>
	<label for="search">Search by contact name:</label>
	<input type="text" id="search">
	<button>Search</button>

	<p></p>

	<script>
		var contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
		var para = document.querySelector('p');
		var input = document.querySelector('input');
		var btn = document.querySelector('button');

		btn.addEventListener('click', function () {
			var inputValue = input.value;
			inputValue = '';
			inputValue.facus();
			for(var i = 0; i < contacts.length; i++){
				var splitContacts = contacts[i].split(":");
				if(splitContacts[0] = inputValue){
					para.textContent = splitContacts[0] + "'s name is " + splitContacts[1];
					break;
				} else {
					para.textContent = "Contact not found."
				}
			}
		});
	</script>
</body>

</html>